<template>
  <div class="ChildPage TablePage">
    <vb-table :option="option" ref="table"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @on-load="getList">
      <template #table-isLock="scope">
        <span class="tableSpan disabledSpan" v-if="scope.row.isLock">锁定</span>
        <span class="tableSpan effectSpan" v-else>正常</span>
      </template>
      <template #form-stockNos="scope">
        <el-select v-model="scope.form.stockNos" multiple placeholder="请选择仓库" style="width: 100%">
          <el-option v-for="item in dataList" :key="item.fNumber" :label="item.fName" :value="item.fNumber"></el-option>
        </el-select>
      </template>
      <template #table-stockNos="scope">
        {{ showStock(scope.row.stockNos) }}
      </template>
    </vb-table>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {
  },
  data() {
    let self = this
    return {
      option: {
        selection: true,
        index: true,
        menuWidth: 260,
        form: {
          width: 800
        },
        column: [
          {
            label: "基础信息",
            type: 'split'
          },
          {
            label: "登录账户",
            prop: "account",
            search: {
              show: true,
              hiddenLabel: true,
              label: "关键词",
              prop: "keyword",
              placeholder: "\ue605 账号/昵称/姓名"
            },
            form: {
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入登录账户",
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "密码",
            prop: 'password',
            inputType: "password",
            tableShow: false,
            form: {
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
              vIf: function (row, form, isUpdate) {
                return !isUpdate
              }
            },
          },
          {
            label: "重复密码",
            prop: 'repassword',
            inputType: "password",
            tableShow: false,
            form: {
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
              vIf: function (row, form, isUpdate) {
                return !isUpdate
              }
            },
          },
          {
            label: "详细信息",
            type: 'split'
          },
          {
            label: "用户昵称",
            prop: 'nickName',
            form: {
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "用户姓名",
            prop: 'name',
            form: {
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "手机号码",
            prop: 'mobile',
            tableShow: false
          },
          {
            label: "电子邮箱",
            prop: 'email',
            tableShow: false
          },
          {
            label: "用户性别",
            prop: 'gender',
            type: "radio",
            tableShow: false,
            dicData: [
              {
                id: 'men',
                label: "男"
              },
              {
                id: 'women',
                label: "女"
              }
            ]
          },
          {
            label: "用户生日",
            prop: "birthday",
            type: "date",
            tableShow: false,
            form: {
              valueFormat: "YYYY-MM-DD",
            }
          },
          {
            label: "职责信息",
            type: 'split'
          },
          {
            label: "用户编号",
            prop: "key",
            form: {}
          },
          {
            label: "状态",
            prop: "isLock",
            width: 100,
            formShow: false,
            form: {},
          },
          {
            label: "所属角色",
            prop: "characterIds",
            type: "select",
            baseKey: "role",
            dicLabel: "name",
            minWidth: 110,
            form: {
              multiple: true,
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ],
              remoteMethod: function(row, form, done) {
                self.getCharacterList(done)
              }
            }
          },
          {
            label: "生产车间",
            prop: "department",
            type: "select",
            dicId: "fNumber",
            dicLabel: "fName",
            form: {
              remoteMethod: function(row, form, done) {
                self.getDepartmentList(done)
              }
            }
          },
          {
            label: "所属机构",
            prop: 'organizationIds',
            type: "tree",
            dicData: [],
            dicLabel: "name",
            minWidth: 150,
            treeProps: {
              checkStrictly: true,
              emitPath: false,
              label: "name",
              value: "id",
              multiple: true
            },
            form: {
              span: 24,
              remoteMethod: function(row, form, done) {
                self.getOrganList(done)
              },
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ]
            },
            search: {
              show: true,
              width: 300
            }
          },
          {
            label: "关联仓库",
            prop: 'stockNos',
            minWidth: 200,
            form: {
              span: 24,
              rules: [
                {
                  required: true,
                  trigger: "click"
                }
              ]
            }
          }
        ],
        handleBtnList: [
          {
            key: "edit"
          },
          {
            key: "delete"
          },
          {
            label: "重置密码",
            icon: "el-icon-key",
            type: "text",
            callback: function (row) {
              self.resetPassword([row.id])
            }
          },
          {
            label: "锁定",
            icon: "el-icon-lock",
            type: "text",
            vIf: function (item) {
              return !item.isLock
            },
            callback: function (row) {
              self.lockCustomer([row.id])
            }
          },
          {
            label: "启用",
            icon: "el-icon-unlock",
            type: "text",
            vIf: function (item) {
              return item.isLock
            },
            callback: function (row) {
              self.unLockCustomer([row.id])
            }
          },
        ],
        multipleBtnList: [
          {key: "delete"},
          // {
          //   label: "角色配置",
          //   icon: "el-icon-user-solid",
          //   type: "default",
          //   callback: function () {
          //   }
          // },
          {
            label: "密码重置",
            icon: "el-icon-key",
            type: "default",
            callback: function (ids) {
              self.resetPassword(ids)
            }
          }
        ]
      },
      loading: false,
      dataList: [],
      stockList: []
    }
  },
  computed: {},
  async mounted() {
    await this.getStock()
    await this.getStockName()
  },
  methods: {
    async getStockName() {
      this.loading = true;
      try {
        let res = await this.$api.getChildDictionaryListByKeys({
          keys: ['stock']
        });
        if (!res.res) return;
        this.stockList = res.stock;
      } finally {
        this.loading = false;
      }
    },

    showStock(val) {
      if (!val) return ''
      let stocks = ''
      for (let i = 0; i < val.length; i++) {
        if (stocks) stocks += ","
        stocks += this.getStockByNo(val[i]);
      }
      return stocks;
    },
    getStockByNo(stockNo) {
      if (this.stockList && this.stockList.length > 0) {
        for(let i = 0; i < this.stockList.length; i++) {
          if (this.stockList[i].key === stockNo) {
            return this.stockList[i].name;
          }
        }
      }
      return '';
    },

    async getStock() {
      this.loading = true
      try {
        let res = await this.callApi('get_stock')
        if (!res.res) return
        this.dataList = res.data
      } finally {
        this.loading = false
      }
    },
    /**
     * 查询数据列表信息
     * @param page
     * @param size
     * @param search 检索条件
     * @param done
     */
    getList (page, size, search, done) {
      this.$api.getCustomerList(Object.assign({
        pageIndex: page,
        pageSize: size
      }, search)).then(res => {
        done(res)
      })
    },

    /**
     * 新增数据处理
     * @param form
     * @param done
     */
    rowSave (form, done) {
      this.$api.addCustomer(form).then((res) => {
        done(res)
      })
    },

    /**
     * 更新数据处理
     * @param form
     * @param done
     */
    rowUpdate (form, done) {
      this.$api.updateCustomer(form).then((res) => {
        done(res)
      })
    },

    /**
     * 删除数据处理
     * @param ids
     * @param done
     */
    rowDel (ids, done) {
      this.$api.deleteCustomer({
        ids: ids
      }).then((res) => {
        done(res)
      })
    },

    /**
     * 查询角色数据
     * @param done
     */
    getCharacterList (done) {
      this.$api.getCharacterList({
        pageSize: 10000
      }).then(res => {
        done(res.data)
      })
    },

    /**
     * 查询角色数据
     * @param done
     */
    getDepartmentList (done) {
      this.$api.getDepartmentList({
        pageSize: 10000
      }).then(res => {
        res.data = res.data.filter(v => v.fGroup === "07")
        done(res.data)
      })
    },

    /**
     * 查询组织数据
     * @param done
     */
    getOrganList (done) {
      let self = this
      this.$api.getOrganList().then(res => {
        res.data = self.$apiUtils.arrOrganList(res.data)
        done(res.data)
      })
    },

    /**
     * 用户重置密码
     * @param ids
     */
    resetPassword (ids) {
      let self = this
      self.$prompt('请输入重置密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '重置密码不能为空'
      }).then(({ value }) => {
        self.$confirm(`确定将密码重置为${value}吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.callApi("resetPassword", {
            ids: ids,
            value: value
          }).then(() => {
            self.$message.success("密码重置成功")
          })
        })
      })
    },

    /**
     * 锁定用户
     * @param ids
     */
    lockCustomer (ids) {
      let self = this
      self.$confirm("确定锁定操作吗", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.callApi("lockCustomers", {
          ids: ids
        }).then(() => {
          self.$message.success("锁定成功")
          self.$refs.table.reload()
        })
      })
    },

    /**
     * 解锁用户
     * @param ids
     */
    unLockCustomer (ids) {
      let self = this
      self.$confirm("确定解除锁定操作吗", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.callApi("unlockCustomers", {
          ids: ids
        }).then(() => {
          self.$message.success("解除锁定成功")
          self.$refs.table.reload()
        })
      })
    }
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
</style>
